import React from 'react';
import { Link } from 'react-router-dom'

import PageTitle from 'component/page-title/index.jsx';
import MUtil from 'util/mm.jsx';
import Statistic from 'service/statistic-service.jsx';
import './index.scss';

const __mm = new MUtil();
const __statistic = new Statistic();


class Home extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      userCount: '-',
      productCount: '-',
      orderCount: '-',
    }
  }

  componentDidMount(){
    this.loadCount();
  }

  //请求接口
  loadCount(){
    __statistic.getHomeCount().then(res => {
      //因为我们接收到的字段，和我们state定义的三个名字恰好是一样的，所以直接将 res 传递进去就行
      this.setState(res);
    }, errMsg => {
      __mm.errorTips(errMsg)
    });
  }

  render(){
      return (
          <div id="page-wrapper">
            <PageTitle title="首页" />
            <div className="row">
              <div className="col-md-4">
                <Link to="/user" className="color-box brown">
                  <p className="count">{this.state.userCount}</p>
                  <p className="desc">
                    <i className="fa fa-user-o"></i>
                    <span>用户总数</span>
                  </p>
                </Link>
              </div>
              <div className="col-md-4">
                <Link to="/product" className="color-box green">
                  <p className="count">{this.state.productCount}</p>
                  <p className="desc">
                    <i className="fa fa-list"></i>
                    <span>商品总数</span>
                  </p>
                </Link>
              </div>
              <div className="col-md-4">
                <Link to="/order" className="color-box blue">
                  <p className="count">{this.state.orderCount}</p>
                  <p className="desc">
                    <i className="fa fa-check-square-o"></i>
                    <span>订单总数</span>
                  </p>
                </Link>
              </div>
            </div>
          </div>
      );
  }
}

// 暴露组件
// 因为只有一个 class Home，所以用 default
export default Home;